はじめてのプログラミング②(環境構築・Processing 入門)
https://youtu.be/B6YqbtaIblM
Processing の開発環境を構築する方法を説明し、一緒に最初のプログラムをつくり、最後に情報の集め方について説明します。
チャプター:
00:00 自己紹介・今回の大まかな流れ
00:22 Processing のダウンロード
00:57 macOS でどれをダウンロードすべきか
01:40 Processing の初回起動
02:10 はじめてのプログラム
03:27 println・基本的な実行順序
03:44 関数・セミコロンについて
04:21 リファレンスについて
05:17 次回予告
さて、いよいよ Processing を用いたプログラミングを始めます。
今回の大まかな流れはこのようになります。
コンピュータに Processing を導入し、初めてのプログラムをつくります。
また、予め用意された Processing の機能に関する情報をどうやって集めるかについても言及します。
(Processing をインストールする様子を画面録画したものを再生しながら)
ではさっそく Processing を入手しに行きましょう。
概要欄に記載してあるリンクから、Processing の公式 Web サイトにアクセスしてください。
続けて、Download と書かれたボタンをクリックしてページを切り替えてください。
ここで、Processing を導入したいコンピュータの OS にあわせてダウンロードするものを選択するんですが、macOS の場合は2択から選ぶ必要があるので、どちらを選べばいいか調べる方法を説明しておきます。
どの OS の場合も圧縮ファイルがダウンロードされます。
チャプターをわけてあるので、macOS を利用していない場合はひとつチャプターを飛ばしても大丈夫です。
では、macOS がインストールされたコンピュータに導入するための説明をします。
左上のりんごマークをクリックし、「このMacについて」をクリックしてください。
すると新たにウィンドウが開きます。
プロセッサの欄に CPU の名称が記載されています。
ここに Intel Core と書かれているならば Intel 製の CPU が内蔵されていることになるので、Processing のダウンロードページで左上の「MacOS (Intel 64bit)」をクリックしてください。
Intel Core ではなく Apple M1 などと書かれている場合は真ん中の「MacOS (Apple Sillicon)」をクリックしてください。
共通の作業の説明に戻ります。
では、圧縮ファイルのダウンロードが完了したので解凍します。
なかに Processing の本体が含まれています。
ダブルクリックで起動します。
Windows と macOS では初回起動時にこのようにセキュリティ上の注意喚起の画面が OS によって表示されることがありますが、Processing には危険性はありませんので続行してください。
これが Processing のメイン画面です。
これから初めてのプログラムを提示するので、書き写して実行し、挙動を観察してみてください。
行末のセミコロンを忘れずに入力してください。
code: hello.pde
println("Hello");
これで最初のプログラムができました。
いま書いた言語が Java という言語です。
Processing を用いない Java の開発の場合はもっと長い記述が必要なんですが、Processing のおかげで簡略化されたかたちで書けるようになっています。
Java についての細かな解説は追々やっていくので、とりあえずは Processing に慣れていきましょう。
この再生ボタンのようなマークのボタンが実行ボタンです。
下の黒っぽい背景の部分に Hello と出力されていれば成功です。
灰色っぽい小さなウィンドウも表示されていますが、これは実行中に図形や文字、画像を描画できるキャンバスのようなものです。
ここに自動生成された席替え表を描画することが当面の目標となります。
Hello が出力されたこの部分のことをコンソールといいます。
主に、プログラムがどのように動いているかを調査するときに使われます。
停止ボタンをクリックしてプログラムを停止させます。
2行目にこのように追記してください。
code: printTwice.pde
println("Hello");
println("world");
実行してみると、2行に分けて Hello と world が出力されました。
同じように3行目、4行目と追加していっても、同様に出力される行が増えていくことになります。
空行を挟んだり、1行にまとめたりしても挙動は変わらないようですね。
とにかく左から順に println という名前、カッコ、表示したい内容、閉じカッコと書くと、それをコンソールに出力してくれる、ということがわかりました。
そして、一番上に書いたものから下に向かって順に実行が進むこともわかりました。
この println の働きように、受け取ったデータを使って特定の処理をするものを、プログラミングの用語で「関数」といいます。
ここでは「受け取ったものをコンソールに出力する」という関数が、println という名前と紐付けられ、何度でもプログラム内で再利用できるようになっています。
では残りのセミコロンは何を意味するのでしょうか?
このあたりの文法については後々厳密に扱いますが、これらのセミコロンは、プログラムを文章として捉えたときに一文一文を区切る記号のようなものだとしてとりあえず鵜呑みにしてほしいです。
println のように予め用意されている関数については、Processing の公式 Web サイトの Reference ページで細かく説明されています。
すべて英語で書かれているうえ、まだ専門用語の紹介が十分ではないので読解は難しいかもしれません。
でもこれからプログラムを自分で考えてかたちにしていくうえで、このリファレンスのように信頼できる情報源を見つけ、どんな機能が予め用意されていて再利用できるのか、どのように使うのかを調査する能力は特に重要です。
注意してほしいのは、学校でテストされる漢字や英単語のように、こういった機能について細かく暗記しておく必要はないということです。
いちいち書いて覚えたりしていては時間の無駄ですし、他に時間をかけるべきことがたくさんあります。
大まかにどんな機能が提供されているかだけ頭にいれておいて、個々の詳細については必要になり次第リファレンスで確認すればいいと思います。
今回はここまでにします。
次回は、もっといろいろな関数を使って、画面に複数の図形を描画するところまで一緒にやっていきます。
お楽しみに。
(以下、ボツ)
初めてのプログラムを保存しておきましょう。
コントロールキーとSキーを同時に押すと、未保存の場合はどんな名前をつけてどこに保存するか聞かれ、そのプログラムを既に保存したことがある場合は上書き保存されます。
hello と打ち込んで確定してください。
これで保存が完了しました。
バツボタンで Processing を終了します。